<template>
  <div id="caurse_manage" class="container">
    <div class="content">
      <!-- <div class="title">课程类别管理</div> -->
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <el-input
              style="width: 3.5rem;"
              placeholder="搜索 课程类别名称"
              v-model="searchText"
              class="input_search"
              clearable
            ></el-input>
            <div @click="searchCourse()" class="search_btn" style="margin-left:0.1rem;">搜索</div>
            <div class="right_btn" :style="'visibility:'+disableByRole.newBtn" @click="dialogFormVisible = true">新&nbsp&nbsp增</div>
          </div>
        </div>

        <div>
          <table class="table" cellspacing="0">
            <thead class="thead">
              <tr>
                <td style="width: 2rem;">序号</td>
                <td style="width: 4rem;">课程类别</td>
                <td style="width: 4rem;">所属机构</td>
                <td style="width: 4rem;">创建人</td>
                <td style="width: 4rem;">创建时间</td>
                <td style="width: 2rem;"  v-if="disableByRole.editorBtn==true||disableByRole.deleteBtn==true">操作</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr v-for="item,index in courseTypeList">
                <td>{{item.orderBy}}</td>
                <td>{{item.name}}</td>
                <td>{{item.orgName}}</td>
                <td>{{item.createUserName}}</td>
                <td>{{item.createTime}}</td>
                <td  v-if="disableByRole.editorBtn==true||disableByRole.deleteBtn==true">
                  <span class="operate_btn" @click="handleEdit(index,item)"
                  v-if="disableByRole.editorBtn">编辑</span>
                  &nbsp;
                  <span
                    v-if="disableByRole.deleteBtn"
                    class="operate_btn"
                    @click="handleDelete(index,item)"
                  >删除</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="tabledisplayObj.currentPage"
          @size-change="pageSizeChange"
          @current-change="tabledisplayChangePage"
          :total="tabledisplayObj.total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog title="新建课程类别" :visible.sync="dialogFormVisible" center width="30%" :close-on-click-modal="false">
      <el-form :model="form">
        <el-form-item
          label="课程类别"
          :label-width="formLabelWidth"
          :rules="[
      { required: true, message: '课程类别不能为空'}]"
        >
          <el-input style="width:70%" maxlength="30" clearable v-model="form.name" placeholder="请输入类别名称"></el-input>
        </el-form-item>
        <el-form-item
          label="序号"
          :label-width="formLabelWidth"
          :rules="[
      { required: true, message: '序号不能为空'}]"
        >
          <!-- <el-input style="width:70%" onpaste="return false;" onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
            @change="valueChange" type="number" v-model="form.orderBy" placeholder="请输入排序号"></el-input> -->
             <el-input-number class="newclassroomNumber" style="width:70%;" @change="valueChange"
            v-model="form.orderBy" :min="1" :max="9999" label="请输入排序号"></el-input-number>
        </el-form-item>
        <!-- <el-form-item
          label="所属机构"
          :label-width="formLabelWidth"
          :rules="[
      { required: true, message: '所属机构不能为空'}]"
        >
          <el-select v-model="form.orgId" style="width:70%"  placeholder="选择所属机构">
            <el-option
              v-for="item in orgList"
              :key="item.orgId"
              :label="item.orgName"
              :value="item.orgId"
            ></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCofim()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑课程类别" :visible.sync="dialogFormVisible_update" center width="30%" :close-on-click-modal="false">
      <el-form :model="form_update">
        <el-form-item
          label="课程类别"
          :label-width="formLabelWidth"
          :rules="[
      { required: true, message: '课程类别不能为空'}]"
        >
          <el-input style="width:70%" maxlength="30" clearable v-model="form_update.name" placeholder="请输入类别名称"></el-input>
        </el-form-item>
        <el-form-item
          label="序号"
          :label-width="formLabelWidth"
          :rules="[
      { required: true, message: '序号不能为空'}]"
        >
          <!-- <el-input style="width:70%" onpaste="return false;" onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
           type="number"  @change="valueChange" v-model="form_update.orderBy" placeholder="请输入排序号"></el-input> -->
            <el-input-number class="newclassroomNumber" style="width:70%;" @change="valueChange"
            v-model="form_update.orderBy" :min="1" :max="9999" label="请输入排序号"></el-input-number>
        </el-form-item>
        <!-- <el-form-item
          label="所属机构"
          :label-width="formLabelWidth"
          :rules="[
      { required: true, message: '所属机构不能为空'}]"
        >
          <el-select v-model="form_update.orgId" style="width:70%"  placeholder="选择所属机构">
            <el-option
              v-for="item in orgList"
              :key="item.orgId"
              :label="item.orgName"
              :value="item.orgId"
            ></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible_update = false">取 消</el-button>
        <el-button type="primary" @click="updateCofim()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex"; //先要引入
import { constants } from "fs";
let vm;
let user;
export default {
  data() {
    return {
      isShowSearch: false,
      searchText: "", //搜索框输入文本
      tabledisplayObj: {
        currentPage: 1,
        size: 10,
        total: 0
      },
      courseTypeList: [],
      dialogFormVisible: false,
      dialogFormVisible_update: false,
      formLabelWidth: "140px",
      orgList: [],
      form: {
        name: "",
        orderBy: "",
        orgId: 0
      },
      form_update: {
        name: "",
        orderBy: "",
        orgId: 0,
        courseTypeId: 0
      },
      /**角色权限限制 */
      disableByRole:{
        newBtn:'visible',
        editorBtn:true,
        deleteBtn:true
      }
    };
  },
  components: {},
  watch: {
    // 如果 `searchText` 发生改变，这个函数就会运行
    searchText: function(newSearchText, oldSearchText) {
      if (newSearchText == "") {
        this.tabledisplayObj.currentPage = 1;
        this.isShowSearch = false;
        this.initData();
      }
    }
  },
  methods: {
    valueChange(val){
      console.log(val);
      if (!tool.judge("integer0",val)) {
        this.$message.warning("需为正整数");
        val = "";
      }
    },
    /**
     * 初始化数据
     */
    initData() {
      let paras = {
        currPage: this.tabledisplayObj.currentPage,
        pageSize: this.tabledisplayObj.size
      }; //设置请求课程类型列表参数
      if (this.isShowSearch) {
        paras.name = this.searchText;
      }
      this.getData(paras);
      this.disableOperationByRole();
    },
    /**根据角色权限限制操作 */
    disableOperationByRole(){
      switch(user.roleMode){
        //超级管理员
        case 0:{
          this.disableByRole={
            newBtn:'hidden',
            editorBtn:false,
            deleteBtn:false
          };
          break;
        }
        //机构管理员
        case 1:{
          this.disableByRole={
            newBtn:'visible',
            editorBtn:true,
            deleteBtn:true
          };
          break;
        }
        //校区管理员
        case 2:{
          this.disableByRole={
            newBtn:'hidden',
            editorBtn:false,
            deleteBtn:false
          };
          break;
        }
      }
    },
    /**
     * 抽取出来获取课程类别列表
     */
    getData(paras) {
      let courseTypetemp = []; //临时存放课程类型列表
      api.coursetypeList(paras).then(function(data) {
        if (data.resultCode == 2000) {
          courseTypetemp = data.list;
          for (let i = 0; i < courseTypetemp.length; i++) {
            courseTypetemp[i].createTime = courseTypetemp[i].createTime.split(
              " "
            )[0];
          }
          vm.tabledisplayObj.total = data.totalCount;
          vm.courseTypeList = courseTypetemp;
        }else{
          vm.$message.error(data.message);
        }
      });
    },
     pageSizeChange: function(val) {
      this.tabledisplayObj.size = val;
      this.initData();
    },
    /**表格显示形式翻页 */
    tabledisplayChangePage(val) {
      this.tabledisplayObj.currentPage = val;
      this.initData();
    },
    /**
     * 添加数据
     */
    addCofim() {
      if (this.form.name == "") {
        this.$message.warning("课程类别不能为空");
        return;
      }
      if (!tool.judge("classname", this.form.name)) {
        this.$message.warning("请输入有效的课程类别名称");
        return;
      }
      if (this.form.orderBy == "") {
        this.$message.warning("序号不能为空");
        return;
      }
      if (!tool.judge("integer0",this.form.orderBy)) {
        this.$message.warning("序号需为正整数");
        return;
      }
      if(parseInt(this.form.orderBy)>999){
        this.$message.warning("序号不能超过999");
        return;
      }
      let paras = {
        name: this.form.name,
        orgId: user.orgId,
        isDelete: "0",
        orderBy: this.form.orderBy
      };
      api.coursetypeAdd(paras).then(function(data) {
        if (data.resultCode == 2000) {
          vm.dialogFormVisible = false;
          vm.form = {
            name: "",
            orderBy: "",
            orgId:user.orgId
          };
          vm.initData();
          vm.$message({
            message: "添加课程类别成功",
            type: "success"
          });
        }else{
          vm.$message.error(data.message);
        }
      });
    },
    /**
     * 更新课程类型
     */
    updateCofim() {
      if (this.form_update.name == "") {
        this.$message.warning("课程类别不能为空");
        return;
      }
      if (!tool.judge("classname", this.form_update.name)) {
        this.$message.warning("请输入有效的课程类别名称");
        return;
      }
      if (this.form_update.orderBy == "" && this.form_update.orderBy !=0) {
        this.$message.warning("序号不能为空");
        return;
      }
      if (!tool.judge("integer0",this.form_update.orderBy)) {
        this.$message.warning("序号需为正整数");
        return;
      }
      if(parseInt(this.form_update.orderBy)>999){
        this.$message.warning("序号不能超过999");
        return;
      }
      let paras = {
        name: this.form_update.name,
        isDelete: "0",
        orgId: this.form_update.orgId,
        orderBy: this.form_update.orderBy,
        courseTypeId: this.form_update.courseTypeId
      };
      api.coursetypeUpdate(paras).then(function(data) {
        if (data.resultCode == 2000) {
          vm.dialogFormVisible_update = false;
          vm.form_update = {
            name: "",
            orderBy: "",
            orgId:0,
            courseTypeId: 0
          };
          vm.initData();
          vm.$message({
            message: "编辑课程类别成功",
            type: "success"
          });
        }else{
          vm.$message.error(data.message);
        }
      });
    },
    /**
     * 点击编辑
     */
    handleEdit(index, row) {
      console.log(index, row);
      this.form_update = {
        name: row.name,
        orderBy: row.orderBy,
        orgId: row.orgId,
        courseTypeId: row.courseTypeId
      };
      this.dialogFormVisible_update = true;
    },
    /**
     * 点击删除
     */
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将删除该课程类别, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          // name: row.name,
          //   orgId: row.orgId,
          //   isDelete: "1",
          //   orderBy: row.orderBy,
          let paras = {
            
            courseTypeId: row.courseTypeId
          };
          api.coursetypeDelete(paras).then(function(data) {
            if (data.resultCode == 2000) {
              vm.initData();
              vm.$message({
                message: "删除成功",
                type: "success"
              });
            }else{
          vm.$message.error(data.message);
        }
          });
        })
        .catch(() => {});
    },
    /**
     * 搜索课程
     */
    searchCourse() {
      console.log(this.searchText);
      if (this.searchText == "") return;
      this.tabledisplayObj.currentPage =1;
      let paras = {
        name: this.searchText,
        currPage: 1,
        pageSize: this.tabledisplayObj.size
      }; //设置请求课程类型列表参数
      this.getData(paras);
      this.isShowSearch = true;
    }
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    // if(user.roleMode>0){
    //   this.form.orgId = user.orgId;
    // }else{
    //   this.form.orgId = "";
    // }
    // api.orgList().then(function(data) {
    //   if (data.result == "操作成功") {
    //     vm.orgList = data.list;
    //   }
    // });
    this.initData();
  },
  computed: {}
};
</script>

<style lang="scss">
	#caurse_manage {
		.el-input__inner {
			border-radius: 0.08rem;
			font-size: 0.16rem;
			color: #666666;
			height: 0.36rem;
			line-height: 0.36rem;
		}
		.el-input__icon {
			line-height: 0.36rem;
		}
		
		.input_search {
			.el-input__inner {
				background-color: rgb(247,248,250);
			}
		}
		.newclassroomNumber{
    .el-input__inner {
      border-radius: 0.04rem;
      height: 0.4rem;
      line-height: 0.4rem;
    }
  }
	}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
.right_btn {
    background-image: url(../../assets/img/clue_manage/add_white.png);
    width: 1.54rem;
	}
</style>